<template>
    <view v-if="imageUrl">
        <img class="bg" :src="imageUrl + '/static/images/new/minebg.png'" mode="scaleToFill" />
        <view class="content" style="padding-bottom: 100rpx">
            <view class="info">
                <image class="avatar" :src="user.avatar" mode="scaleToFill" />
                <view class="text">
                    <!-- @tap="$wanlshop.auth('/pages/user/setting/user')" -->
                    <view class="name f-36"
                        @tap="$wanlshop.auth('/pages/user/member/MemberFillIn?userData=' + JSON.stringify(userData))">
                        {{ user.nickname || "登录/注册" }}
                    </view>
                    <view class="ecode" @click="showModal('share')">
                        <image class="icon" :src="imageUrl + '/static/images/new/m.png'" mode="scaleToFill" />
                        <text class="code f-24"> {{ user.cip_code ? vip_code : "会员码" }} </text>
                    </view>
                </view>
                <view class="icons flex just-between">
                    <view class="kf" @tap="$wanlshop.auth('/pages/user/service')">
                        <image class="icon" :src="imageUrl + '/static/images/new/kf.png'" mode="scaleToFill" />
                        <text class="f-20"> 联系客服 </text>
                    </view>
                    <!-- 设置 -->
                    <view class="set"
                        @click="jump('/pages/user/setting/setting?userDatas=' + JSON.stringify(userData))">
                        <image class="icon" :src="imageUrl + '/static/images/new/sz.png'" mode="scaleToFill" />
                        <text class="f-20"> 设置 </text>
                    </view>
                </view>
            </view>
            <view class="subInfo flex just-around">
                <view class="item" @click="jump('/pages/user/collect')">
                    <view class="label"> 收藏夹 </view>
                    <view class="value">
                        {{ statistics.dynamic.collection }}
                    </view>
                </view>
                <view class="item" @click="jump('/pages/user/follow')">
                    <view class="label"> 关注店铺 </view>
                    <view class="value">
                        {{ statistics.dynamic.concern }}
                    </view>
                </view>
                <view class="item" @click="jump('/pages/user/footprint')">
                    <view class="label"> 足迹 </view>
                    <view class="value">
                        {{ statistics.dynamic.footprint }}
                    </view>
                </view>
            </view>

            <view class="order card">
                <view class="member">
                    <image class="mbg" :src="imageUrl + '/static/images/new/vbg.png'" mode="scaleToFill" />
                    <view class="text">
                        <view class="left">
                            <image class="icon" :src="imageUrl + '/static/images/new/hguan.png'" mode="scaleToFill" />
                            <text class="f-30">
                                {{ userData.is_vip == 1 ? userData.vip.name : "达仁印象城会员" }}
                            </text>
                        </view>
                        <view class="right f-24" v-if="userData.is_vip == 1" @click="jump('/pages/user/member/member')"
                            style="color: #feda9d !important; background: none !important">
                            {{ userData.vip.prompting }}
                        </view>
                        <view class="right f-24" style="padding: 0 20rpx" v-else @click="jump('/pages/user/member/member')">
                            开通会员
                        </view>
                    </view>
                </view>
                <view class="title flex just-between">
                    <view class="left f-30"> 我的订单 </view>
                    <view class="right" @click="jump('/pages/user/order/order?state=0')">
                        <text class="f-24"> 全部订单 </text>
                        <image class="arrow" :src="imageUrl + '/static/images/new/arrow_right.png'"
                            mode="scaleToFill" />
                    </view>
                </view>
                <view class="items flex just-around">
                    <view class="item flex just-center column" v-for="(item, index) in orderItems" :key="index"
                        @click="jump(item.url)">
                        <image class="icons" :src="imageUrl + item.icon" mode="scaleToFill" />
                        <text class="f-26"> {{ item.name }} </text>
                    </view>
                </view>
            </view>

            <view class="card qianbao">
                <view class="top flex just-around">
                    <!-- 红包卡券 -->
                    <view class="item flex" @click="jump('/pages/user/coupon/list')">
                        <image class="icon" :src="imageUrl + '/static/images/new/cen1.png'" mode="scaleToFill" />
                        <view class="text flex column">
                            <text class="f-24 titile"> 红包卡券 </text>
                            <text class="f-24 sub">
                                领取优惠券
                                <image class="arrow" :src="imageUrl + '/static/images/new/arrow_right.png'"
                                    mode="scaleToFill" />
                            </text>
                        </view>
                    </view>
                    <view class="line_col"></view>
                    <!-- 我的积分 -->
                    <view class="item flex" @click="jump('/pages/user/signin/log')">
                        <image class="icon" :src="imageUrl + '/static/images/new/cen2.png'" mode="scaleToFill" />
                        <view class="text flex column">
                            <text class="f-24 titile"> 我的积分 </text>
                            <text class="f-24 sub">查看积分明细
                                <image class="arrow" :src="imageUrl + '/static/images/new/arrow_right.png'"
                                    mode="scaleToFill" />
                            </text>
                        </view>
                    </view>
                </view>
                <view class="bottom flex just-around" style="text-align: center">
                    <!-- 卡券 -->
                    <view class="item" @click="jump('/pages/user/coupon/mycard')">
                        <view class="value">
                            <text class="f-24">
                                {{ statistics.dynamic.coupon }}
                            </text>
                        </view>
                        <view lang="label">
                            <text class="f-24"> 我的卡券 </text>
                        </view>
                    </view>
                    <!-- 余额 -->
                    <view class="item" @click="jump('/pages/user/money/money')">
                        <view class="value">
                            <text class="f-24">
                                {{ user.money ? user.money : "0.00" }}
                            </text>
                        </view>
                        <view lang="label">
                            <text class="f-24"> 余额 </text>
                        </view>
                    </view>
                    <!-- 银行卡 -->
                    <view class="item" @click="jump('/pages/user/bank/bank')">
                        <view class="value">
                            <text class="f-24">
                                {{ statistics.dynamic.accountbank }}
                            </text>
                        </view>
                        <view lang="label">
                            <text class="f-24"> 银行卡 </text>
                        </view>
                    </view>
                    <!-- 积分 -->
                    <view class="item" @click="jump('/pages/user/signin/log')">
                        <view class="value">
                            <text class="f-24">
                                {{ user.score ? user.score : 0 }}
                            </text>
                        </view>
                        <view lang="label">
                            <text class="f-24"> 积分 </text>
                        </view>
                    </view>
                    <!-- 账单明细 -->
                    <view class="item" @click="jump('/pages/user/money/list')">
                        <view class="value">
                            <image class="icons" :src="imageUrl + '/static/images/new/zd.png'" mode="scaleToFill" />
                        </view>
                        <view lang="label">
                            <text class="f-24"> 账单明细 </text>
                        </view>
                    </view>
                </view>
            </view>

            <view class="card other flex wrap">
                <view class="item flex just-center column" v-for="(item, index) in otherItems" :key="index"
                    @click="jump(item.url)">
                    <image class="icons" :src="imageUrl + item.icon" mode="scaleToFill" />
                    <text class="f-26 title" v-if="!(userData.is_shop === 0 && item.name === '商户端')">
                        {{ item.name }}
                    </text>
                </view>
            </view>
        </view>
        <!-- 分享 -->
        <view class="cu-modal wanl-share" :class="modalName == 'share' ? 'show' : ''" @tap="hideModal()">
            <view v-if="modalName == 'share'" class="cu-dialog" @tap.stop="">
                <wanl-poster ref="wanlPoster" page="pages/mine" :scene="{ qr: 'u', pid: user.id }"
                    @success="posterSuccess" @change="hideModal" />
            </view>
        </view>
    </view>
</template>

<script>
import { mapState } from "vuex";
export default {
    data() {
        return {
            imageUrl: this.$imageUrl || "",
            userInfo: {
                avatar: "/static/images/new/avatar.png",
                nickName: "嘿嘿",
                collect: 16,
                follow: 22,
                footprint: 8,
                coupon: 0,
                balance: 0,
                bank: 0,
                integral: 0,
            },
            orderItems: [
                {
                    name: "待付款",
                    icon: "/static/images/new/order1.png",
                    url: "/pages/user/order/order?state=1",
                },
                {
                    name: "待发货",
                    icon: "/static/images/new/order2.png",
                    url: "/pages/user/order/order?state=2",
                },
                {
                    name: "待收货",
                    icon: "/static/images/new/order3.png",
                    url: "/pages/user/order/order?state=3",
                },
                {
                    name: "待评价",
                    icon: "/static/images/new/order4.png",
                    url: "/pages/user/order/order?state=4",
                },
                {
                    name: "售后服务",
                    icon: "/static/images/new/order5.png",
                    url: "/pages/user/refund/lists",
                },
            ],
            otherItems: [
                {
                    id: 1,
                    name: "钱包",
                    icon: "/static/images/new/cc1.png",
                    url: "/pages/user/money/money",
                },
                {
                    id: 2,
                    name: "评论",
                    icon: "/static/images/new/cc2.png",
                    url: "/pages/user/comment/comment",
                },
                {
                    id: 3,
                    name: "收货地址",
                    icon: "/static/images/new/cc3.png",
                    url: "/pages/user/address/address",
                },
                {
                    id: 4,
                    name: "签到",
                    icon: "/static/images/new/cc4.png",
                    url: "/pages/user/signin/signin",
                },
                {
                    id: 5,
                    name: "我的举报",
                    icon: "/static/images/new/cc5.png",
                    url: "/pages/user/complaint/lists",
                },
                {
                    id: 6,
                    name: "反馈",
                    icon: "/static/images/new/cc6.png",
                    url: "/pages/user/feedback/lists",
                },
                {
                    id: 7,
                    name: "帮助中心",
                    icon: "/static/images/new/cc7.png",
                    url: "/pages/user/help",
                },
                {
                    id: 8,
                    name: "积分订单",
                    icon: "/static/images/new/cc9.png",
                    url: "/pages/user/score?status=0",
                },
				{
				    id: 11,
				    name: "拼团订单",
				    icon: "/static/images/new/cc11.png",
				    url: "/pages/apps/groups/order/order",
				}
            ],
            modalName: "",
            headerOpacity: 0,
            // 上拉刷新
            reload: true,
            likeData: [],
            current_page: 1, //当前页码
            last_page: 1, //总页码
            status: "loading",
            contentText: {
                contentdown: " ",
                contentrefresh: "正在加载...",
                contentnomore: "没有更多数据了",
            },
            userData: {}, //刷新后的用户数据
        };
    },

    watch: {
        user: {
            handler(newVal, oldVal) { },
            immediate: true,
        },
    },

    computed: {
        ...mapState(["user", "statistics", "common"]),
    },
    onPullDownRefresh() {
        this.loadData();
    },

    onShow() {
        // setTimeout(() => {
        //     uni.setNavigationBarColor({
        //         frontColor: this.$store.state.common.appStyle.user_font_color == "light" ? "#ffffff" : "#000000",
        //         backgroundColor: this.$store.state.common.appStyle.user_nav_color,
        //     });
        // }, 200);
        if (this.$store.state.user.isLogin) {
            this.loadData();
        }
    },
    mounted() {
        this.loadData();
    },
    onLoad(query) {
        if (query.hasOwnProperty("scene")) {
            let scene = decodeURIComponent(query.scene);
            scene = this.$wanlshop.getParam(scene);
            console.log("小程序码进入：", scene);
        }
        if (this.$store.state.user.isLogin) {
            this.loadData();
        }
        console.log(uni.getStorageInfoSync("login"), "login");
        let login = uni.getStorageInfoSync("login");
        uni.setStorageSync("pid", query.pid);
        uni.setStorageSync("qr", query.qr);
        if (query.qr == "u" && query.pid && (this.$store.state.user.isLogin || login)) {
            uni.request({
                url: "/increased.Index/BlindParent",
                method: "POST",
                data: {
                    pid: query.pid,
                },
                success: (res) => {
                    console.log(res, "shifoushi,,increased.Index/BlindParent");
                    uni.removeStorageSync("pid");
                },
            });
        }
    },

    onPageScroll(e) {
        let tmpY = 50;
        e.scrollTop = e.scrollTop > tmpY ? 50 : e.scrollTop; //如果当前高度大于250则250否则当前高度
        this.headerOpacity = e.scrollTop * (1 / tmpY); //$headerOpacity 赋值当前高度x（1÷250）
    },

    methods: {
        jump(url) {
            if (url == "/pages/merchant/goodsManagement" && this.userData.is_shop == 1) {
                uni.navigateTo({
                    url,
                });
                return;
            } else {
                uni.showToast({
                    title: "您还不是商户",
                    icon: "none",
                    mask: true,
                });
            }
            uni.navigateTo({
                url,
            });
        },
        async loadData() {
            await uni.request({
                url: "/wanlshop/user/refresh",
                method: "POST",
                success: (res) => {
                    this.userData = res.res.data.userinfo;
                    if (this.userData.is_shop == 1) {
                        const exists = this.otherItems.some((item) => item.name === "商户端");
                        if (!exists) {
                            this.otherItems.push({
                                id: 9,
                                name: "商户端",
                                icon: "/static/images/new/cc10.png",
                                url: "/pages/merchant/goodsManagement",
                            });
                        }
                    }
                    const exists1 = this.otherItems.some((item) => item.name === "我的团队");
                    if (!exists1) {
                        this.otherItems.push({
                            id: 10,
                            name: "我的团队",
                            icon: "/static/images/new/cc11.png",
                            url: "/pages/user/teamData",
                        });
                    }
					
					
                    this.$store.commit("statistics/edit", res.data.statistics);
                    this.$store.commit("user/setUserInfo", res.data.userinfo);
                },
            });
            uni.stopPullDownRefresh();
        },
        showModal(name) {
            if (name == "share") {
                if (this.user.isLogin) {
                    this.modalName = name;
                } else {
                    this.$wanlshop.to("/pages/login/login");
                }
            } else {
                this.modalName = name;
            }
        },
        posterSuccess(e) { },
        hideModal() {
            this.modalName = null;
        },
    },
};
</script>

<style lang="scss" scoped>
.bg {
    width: 100vw;
    height: 644rpx;
    position: absolute;
    top: 0;
    z-index: 0;
}

.content {
    width: calc(100% - 60rpx);
    position: absolute;
    // #ifdef H5
    top: 90rpx;
    // #endif
    // #ifdef MP-WEIXIN
    top: 150rpx;
    // #endif
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;

    .info {
        display: flex;
        align-items: center;

        .avatar {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
        }

        .text {
            flex: 1;
            margin-left: 20rpx;

            .name {
                color: #333;
                font-weight: bold;
                margin-bottom: 16rpx;
            }

            .ecode {
                display: flex;
                align-items: center;

                .icon {
                    width: 24rpx;
                    height: 24rpx;
                }

                .code {
                    color: #333;
                    margin-left: 10rpx;
                }
            }
        }

        .icons {
            width: 160rpx;

            .kf,
            .set {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .icon {
                width: 48rpx;
                height: 48rpx;
            }
        }
    }

    .subInfo {
        margin-top: 60rpx;

        .item {
            display: flex;
            flex-direction: column;
            align-items: center;

            .label {
                font-size: 24rpx;
                color: #333;
            }

            .value {
                color: #333;
                margin-top: 10rpx;
                font-weight: bold;
                font-size: 30rpx;
            }
        }
    }

    .member {
        width: 100%;
        height: 122rpx;
        position: relative;

        .mbg {
            width: 100%;
            height: 122rpx;
        }

        .text {
            width: 100%;
            height: 110rpx;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 30rpx;
            box-sizing: border-box;

            .left {
                display: flex;
                align-items: center;

                .icon {
                    width: 36rpx;
                    height: 36rpx;
                }

                >text {
                    font-weight: bold;
                    color: #fdeaca;
                    margin-left: 10rpx;
                }
            }

            .right {
                // width: 142rpx;
                height: 52rpx;
                padding: 0 10rpx;
                background: #feda9d;
                color: #64420f;
                font-weight: bold;
                border-radius: 26rpx;
                text-align: center;
                line-height: 52rpx;
            }
        }
    }

    .order {
        width: 100%;
        margin-top: 20rpx;
        padding: 0;

        .title {
            padding: 20rpx;
            box-sizing: border-box;

            .left {
                font-weight: bold;
                color: #333;
            }

            .right {
                color: #888888;
            }

            .arrow {
                width: 10rpx;
                height: 20rpx;
                margin-left: 10rpx;
            }
        }

        .items {
            padding: 0 0 30rpx;
        }
    }

    .qianbao {
        width: 100%;
        padding-bottom: 30rpx;

        .top {
            margin: 10rpx 0 30rpx;

            .item {
                .text {
                    margin-left: 10rpx;
                    text-align-last: left;

                    >text {
                        width: 100%;
                    }

                    .title {
                        font-size: 28rpx;
                        color: #333;
                    }

                    .sub {
                        margin-top: 6rpx;
                        font-size: 22rpx;
                        color: #888888;
                    }

                    .arrow {
                        height: 16rpx !important;
                    }
                }

                .icon {
                    width: 80rpx;
                    height: 80rpx;
                }
            }
        }

        .bottom {
            .item {
                display: flex;
                flex-direction: column;
                align-items: center;

                .value {
                    // width: 60rpx;
                    height: 60rpx;
                    text-align: center;
                    line-height: 60rpx;
                }
            }
        }
    }

    .other {
        width: 100%;
        justify-content: flex-start;
        padding-top: 30rpx;

        .item {
            width: 25%;
            margin-bottom: 30rpx;

            .title {
                margin-top: 10rpx;
            }
        }
    }
}

.icons {
    width: 60rpx;
    height: 60rpx;
}

.arrow {
    width: 10rpx;
    height: 20rpx;
    margin-left: 10rpx;
}

.line_col {
    width: 2rpx;
    height: 50rpx;
    background: #dadada;
}
</style>
